<template>
    <div class="inventory-inout-record-container">
        <!-- 搜索栏 -->
        <el-row>
            <el-col :span="24" style="padding-top: 0px; padding-left: 24px;">
                <el-form :inline="true" :model="filter" class="demo-form-inline">
                    <el-form-item label="商品编号">
                        <el-input v-model="filter.code" placeholder="商品编号" clearable />
                    </el-form-item>
                    <el-form-item label="商品名称">
                        <el-input v-model="filter.subCommodityName" placeholder="商品名称" clearable />
                    </el-form-item>
                    <el-form-item label="规格">
                        <el-input v-model="filter.standName" placeholder="商品规格" clearable />
                    </el-form-item>

                    <el-form-item label="类型">
                        <el-select v-model="filter.recordType" placeholder="请选择类型" clearable>
                            <el-option label="全部" :value="null"></el-option>
                            <el-option label="入库" :value="1"></el-option>
                            <el-option label="出库" :value="0"></el-option>
                            <el-option label="期初" :value="2"></el-option>
                            <el-option label="盘点" :value="3"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item style="width: 300px" label="日期范围">
                        <el-date-picker v-model="dateRange" type="daterange" range-separator="~"
                            start-placeholder="开始日期" end-placeholder="结束日期" />
                    </el-form-item>

                    <el-form-item>
                        <el-button @click="refreshData">刷新</el-button>                        
                        <el-button type="primary" @click="handleSearch" style="margin-left:10px;">查询</el-button>
                        <el-button @click="resetSearch" style="margin-left: 5px;">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>

        <!-- 数据列表 -->
        <el-row>
            <el-table v-loading="loading" :data="inoutRecordList" style="width: 100%" border>
                <el-table-column prop="createTime" label="日期" align="center" width="100" />
                <el-table-column label="图片" align="center" width="100">
                    <template #default="scope">
                        <el-image style="width: 60px; height: 60px" :src="scope.row.commodityBatch.commodity.imgs"
                            :preview-src-list="[scope.row.commodityBatch.commodity.imgs]" fit="cover"
                            v-if="scope.row.commodityBatch.commodity.imgs">
                            <template #error>
                                <div class="image-slot">
                                    <el-icon>
                                        <Picture />
                                    </el-icon>
                                </div>
                            </template>
                        </el-image>
                        <div v-else class="empty-image">
                            <el-icon>
                                <Picture />
                            </el-icon>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column prop="commodityBatch.commodity.code" label="商品编号" align="center" width="120" />

                <el-table-column prop="commodityBatch.commodity.name" label="商品名称" align="center" width="200"
                    show-overflow-tooltip />

                <el-table-column prop="commodityBatch.commodity.standard" label="规格" align="center" width="100" />



                <el-table-column prop="commodityBatch.count" label="数量" align="right" width="100">
                    <template #default="scope">
                        {{ formatCount(scope.row.commodityBatch.count.value, scope.row.commodityBatch.commodity.unit) }}
                    </template>
                </el-table-column>


                <el-table-column prop="commodityBatch.batchPrice" label="金额" align="right" width="120">
                    <template #default="scope">
                        {{ formatCurrency(scope.row.commodityBatch.batchPrice.value) }}
                    </template>
                </el-table-column>

                <el-table-column prop="wareHouse.name" label="仓库" align="center" width="200" show-overflow-tooltip />

                <el-table-column label="类型" align="center" width="80">
                    <template #default="scope">

                        {{ getRecordTypeName(scope.row.type) }}


                    </template>
                </el-table-column>

                <el-table-column label="其他" align="center" width="100">
                    <template #default="scope">
                        <el-tag v-if="scope.row.isWithdraw">
                            单据撤销
                        </el-tag>
                        <span v-else></span>
                    </template>
                </el-table-column>


            </el-table>
        </el-row>
        <!-- 分页 -->
        <div style="margin-top: 20px; text-align: right">
            <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize" @pagination="fetchInoutRecordData" />
        </div>

    </div>
</template>

<script>
import { ElMessage } from 'element-plus'
import { Picture } from '@element-plus/icons-vue'
import { InventoryUiAction } from '../../public/engine/uiAction/inventoryUiAction'
import { Definition } from '../../public/engine/common/definition'
import { DataPage } from '../../public/network/communicationConverter'
import { Util } from '../../public/utils/util'
import { CommodityInoutRecordFilter } from '../../public/engine/inventory/inventory'
import { deleteInventoryInOutRecordNetworkCache } from '../../public/network/api'

export default {
    name: 'inoutrecords',
    components: {
        Picture
    },
    data() {
        return {
            loading: false,
            inoutRecordList: [],
            total: 0,
            queryParams: {
                pageNum: 1,
                pageSize: Definition.gDefualPageSize
            },
            inventoryUiAction: new InventoryUiAction(),
            filter: new CommodityInoutRecordFilter(),
            dateRange: [] // 添加日期范围数据
        }
    },
    mounted() {
        this.fetchInoutRecordData()
    },
    methods: {
        async fetchInoutRecordData() {
            try {
                this.loading = true

                // 更新日期范围到过滤器
                if (this.dateRange?.length === 2) {
                    this.filter.startDate = this.dateRange[0];
                    this.filter.endDate = new Date(this.dateRange[1]);
                    this.filter.endDate.setHours(23, 59, 59, 999);
                } else {
                    this.filter.startDate = null;
                    this.filter.endDate = null;
                }

                const res = await this.inventoryUiAction.getInventoryInOutRecordData({
                    pageInfo: new DataPage(this.queryParams.pageNum, 0, this.queryParams.pageSize),
                    filter: this.filter.toJson()
                })

                if (res && res.data && res.data.dataList) {
                    this.inoutRecordList = res.data.dataList
                    this.total = res.data.pageInfo.total
                } else if (res.resErr) {
                    ElMessage.error('获取出入库记录数据失败')
                }
            } catch (error) {
                console.error('获取出入库记录数据失败:', error)
                ElMessage.error('获取出入库记录数据失败')
            } finally {
                this.loading = false
            }
        },

        refreshData() {
            deleteInventoryInOutRecordNetworkCache();
            this.fetchInoutRecordData()
        },
        handleSearch() {
            this.queryParams.pageNum = 1
            this.fetchInoutRecordData()
        },

        resetSearch() {
            this.filter = new CommodityInoutRecordFilter();
            this.queryParams.pageNum = 1
            this.dateRange = [];
            this.fetchInoutRecordData()
        },

        formatCurrency(value) {
            return Util.getFundString(value)
        },

        formatCount(value, unit) {
            //console.log("formatCount",value,unit)
            return Util.getCountString(value, unit, { withUnitName: true });
        },

        getRecordTypeName(type) {
            return Util.getInventoryInoutTypeName(type);
        },
    }
}
</script>

<style scoped>
.inventory-inout-record-container {
    padding: 20px;
}

.image-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: #f5f7fa;
    color: #909399;
}

.empty-image {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    background: #f5f7fa;
    color: #909399;
}
</style>